<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>BOM明细</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <div align="center" class="d1" style="color: mediumblue">
        <div style="float: left">
          <el-button @click="goafter" type="info">返回上一级</el-button>
        </div>
        <h3>BOM明细</h3>
      </div>

      <el-table
        :data="orderitem"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>

        <el-table-column
          label="图号">
          <template slot-scope="scope">
            <el-link type="primary"
                     :href="'http://localhost:8080/order/pi-order-pic/download/'+scope.row.code+'/'+nowOrderCode"
                     target="_blank">{{scope.row.code}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          label="零件名称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="生产数量"
          prop="num">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-col :span="12">
              <el-button plain type="success" @click="cxItem(scope.row.id)">制作</el-button>
            </el-col>
          </template>
        </el-table-column>
      </el-table>


      <div>
        <el-dialog width="1200px" title="工艺制作" :visible.sync="dialogFormVisible" @close="cleardialog">
          <el-form :model="craftAndItem.piItem">
            <el-row :gutter="100">
              <el-col :span="9">
                <el-form-item label="图号:" :label-width="formLabelWidth">
                  {{craftAndItem.piItem.name}}
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="名称:" :label-width="formLabelWidth">
                  {{craftAndItem.piItem.code}}
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="数量:" :label-width="formLabelWidth">
                  {{craftAndItem.piItem.num}}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <div>
            <el-button type="success" @click="addrow">添加</el-button>
            <template>
              <el-table
                :data="craftAndItem.piOrderItemMaterial"
                stripe
                style="width: 100%">
                <el-table-column
                  label="商品名称">
                  <template slot-scope="scope">
                    <el-select v-model="craftAndItem.piOrderItemMaterial[scope.$index].materialId" placeholder="请选择" @change="hightjs(scope.$index)">
                      <el-option
                        v-for="item in pimaterialList"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  label="规格">
                  <template slot-scope="scope">
                    <el-select v-model="craftAndItem.piOrderItemMaterial[scope.$index].spec" placeholder="请选择规格">
                      <el-option label="板" :value="2"></el-option>
                      <el-option label="棒" :value="1"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  label="件数">
                  <template slot-scope="scope">
                    <el-input v-model="craftAndItem.piOrderItemMaterial[scope.$index].num" @change="hightjs(scope.$index)"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="下料尺寸(mm)">
                  <template slot-scope="scope" >
                    <el-input v-model="craftAndItem.piOrderItemMaterial[scope.$index].bfLength" placeholder="长"
                              v-if="craftAndItem.piOrderItemMaterial[scope.$index].spec==2" @change="hightjs(scope.$index)">
                    </el-input>
                    <el-input v-model="craftAndItem.piOrderItemMaterial[scope.$index].bfWidth" placeholder="宽"
                              v-if="craftAndItem.piOrderItemMaterial[scope.$index].spec==2" @change="hightjs(scope.$index)">
                    </el-input>
                    <el-input v-model="craftAndItem.piOrderItemMaterial[scope.$index].bfHight" placeholder="高"
                              @change="hightjs(scope.$index)"
                              v-if="craftAndItem.piOrderItemMaterial[scope.$index].spec==2 || craftAndItem.piOrderItemMaterial[scope.$index].spec==1">
                    </el-input>
                    <el-input v-model="craftAndItem.piOrderItemMaterial[scope.$index].bfDiam" placeholder="直径"
                              v-if="craftAndItem.piOrderItemMaterial[scope.$index].spec==1" @change="hightjs(scope.$index)">
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="产品尺寸(mm)">
                  <template slot-scope="scope" >
                    <el-input v-model="craftAndItem.piOrderItemMaterial[scope.$index].afLength" placeholder="长"
                              v-if="craftAndItem.piOrderItemMaterial[scope.$index].spec==2"
                              :value="craftAndItem.piOrderItemMaterial[scope.$index].afLength">
                    </el-input>
                    <el-input v-model="craftAndItem.piOrderItemMaterial[scope.$index].afWidth" placeholder="宽"
                              v-if="craftAndItem.piOrderItemMaterial[scope.$index].spec==2"
                              :value="craftAndItem.piOrderItemMaterial[scope.$index].afWidth">
                    </el-input>
                    <el-input v-model="craftAndItem.piOrderItemMaterial[scope.$index].afHight" placeholder="高"
                              v-if="craftAndItem.piOrderItemMaterial[scope.$index].spec==2 || craftAndItem.piOrderItemMaterial[scope.$index].spec==1"
                              :value="craftAndItem.piOrderItemMaterial[scope.$index].afHight">
                    </el-input>
                    <el-input v-model="craftAndItem.piOrderItemMaterial[scope.$index].afDiam" placeholder="直径"
                              v-if="craftAndItem.piOrderItemMaterial[scope.$index].spec==1"
                              :value="craftAndItem.piOrderItemMaterial[scope.$index].afDiam">
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="产品面积(cm²)">
                  <template slot-scope="scope">
                    <el-input v-model="craftAndItem.piOrderItemMaterial[scope.$index].afArea"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="产品重量(kg)">
                  <template slot-scope="scope">
                    <el-input v-model="craftAndItem.piOrderItemMaterial[scope.$index].afWeight"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="删除">
                  <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" @click="delrow(scope.$index)" circle></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>


          <div>
            <el-button type="success" @click="addProcessrow">添加</el-button>
            <template>
              <el-table
                :data="craftAndItem.piOrderItemProcess"
                stripe
                style="width: 100%">
                <el-table-column
                  label="工序名称">
                  <template slot-scope="scope">
                    <el-select v-model="craftAndItem.piOrderItemProcess[scope.$index].processId" placeholder="请选择" @change="hightjs(scope.$index)">
                      <el-option
                        v-for="item in processList"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  label="准备工时(min)">
                  <template slot-scope="scope">
                    <el-input v-model="craftAndItem.piOrderItemProcess[scope.$index].preWorkHour"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="单件工时(min)">
                  <template slot-scope="scope">
                    <el-input v-model="craftAndItem.piOrderItemProcess[scope.$index].sgWorkHour"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="删除">
                  <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" @click="delrowprocess(scope.$index)" circle></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>

  </div>

</template>

<script>

  export default {
    name: "ckCraftList",
    data() {
      return {
        orderitem: [],
        nowOrderCode: '',
        dialogFormVisible: false,
        formLabelWidth: "120px",
        craftAndItem: {
          piItem: {},
          piOrderItemMaterial:[
            {
              spec:"",
              afLength:'',
              afWidth:'',
              afHight:'',
              afDiam:'',
              afArea:'',
              afWeight:''
            }
          ],
          piOrderItemProcess:[]
        },
        pimaterialList:[],
        processList:[],
        cxMaterial:{},
      }
    },
    methods: {
      cleardialog(){
        this.craftAndItem.PiItem={}
        this.craftAndItem.piOrderItemMaterial=[
          {
            spec:"",
            afLength:'',
            afWidth:'',
            afHight:'',
            afDiam:'',
            afArea:'',
            afWeight:''
          }
        ]
        this.craftAndItem.piOrderItemProcess=[]
      },
      goafter() {
        this.$router.go(-1)
      },
      addrow(){
        this.craftAndItem.piOrderItemMaterial.push({})
      },
      addProcessrow(){
        this.craftAndItem.piOrderItemProcess.push({})
      },
      delrow(val){
        this.craftAndItem.piOrderItemMaterial.splice(val,1)
      },
      delrowprocess(val){
        this.craftAndItem.piOrderItemProcess.splice(val,1)
      },
      searchUser: function (id) {//用户列表
        this.$http.post("/orderprocess/get/" + id).then((res) => {
          this.orderitem = res.data.result;
        });
      },
      cxnowOrderCode(id) {
        this.$http.get("/order/addOrder/delitalOrder/" + id).then((res) => {
          if (res.data.success) {
            this.$message.success(res.data.message)
            this.nowOrderCode = res.data.result.piOrder.code
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      add(){
        if(this.craftAndItem.piOrderItemProcess.length>0 && this.craftAndItem.piOrderItemMaterial.length>0){
          this.$http.post("/order/MakeCraft/add",this.craftAndItem).then((res) => {
            if (res.data.success) {
              this.$message.success(res.data.message)
              this.dialogFormVisible = false
            } else {
              this.$message.error(res.data.message);
            }
          })
        }else{
          this.$message.error("制作项目不能为空");
        }
      },
      cxItem(id) {
        this.dialogFormVisible = true
        this.$http.get("/order/MakeCraft/cxItem/" + id).then((res) => {
          if (res.data.success) {
            if(res.data.message=="已经制作，现在您可以发起修改"){
              this.craftAndItem.piItem = res.data.result.piItem
              this.craftAndItem.piOrderItemMaterial=res.data.result.piOrderItemMaterial
              this.craftAndItem.piOrderItemProcess=res.data.result.piOrderItemProcess
              this.$message.success(res.data.message)
            }else{
              this.$message.success(res.data.message)
              this.craftAndItem.piItem = res.data.result
            }
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      findpimaterialList(){
        this.$http.post("/order/MakeCraft/pimaterialList",{}).then((res) => {
          if (res.data.success) {
            this.pimaterialList = res.data.result
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      findprocessList(){
        this.$http.post("/order/MakeCraft/processList",{}).then((res) => {
          if (res.data.success) {
            this.processList = res.data.result
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      hightjs(index){
        this.$http.get("/material/get/"+this.craftAndItem.piOrderItemMaterial[index].materialId).then((res) => {
          if (res.data.success) {
            this.cxMaterial=res.data.result
          } else {
            this.$message.error(res.data.message);
          }
        })
        let midu=this.cxMaterial.density
        let price=this.cxMaterial.price
        let chang=this.craftAndItem.piOrderItemMaterial[index].bfLength
        let kuan=this.craftAndItem.piOrderItemMaterial[index].bfWidth
        let gao=this.craftAndItem.piOrderItemMaterial[index].bfHight
        let zhijing=this.craftAndItem.piOrderItemMaterial[index].bfDiam
        let num=this.craftAndItem.piOrderItemMaterial[index].num
        let bs=this.craftAndItem.piOrderItemMaterial[index].spec
        if(bs==2){
          if(chang!=null && kuan!=null && gao!=null && num!=null){
            this.craftAndItem.piOrderItemMaterial[index].afHight=Number(gao)/this.craftAndItem.piItem.num
            this.craftAndItem.piOrderItemMaterial[index].afWidth=kuan
            this.craftAndItem.piOrderItemMaterial[index].afLength=chang
            this.craftAndItem.piOrderItemMaterial[index].afArea=((chang*kuan*2+chang*this.craftAndItem.piOrderItemMaterial[index].afHight*2+kuan*this.craftAndItem.piOrderItemMaterial[index].afHight*2)/100).toFixed(4)
            this.craftAndItem.piOrderItemMaterial[index].afWeight=(chang*kuan*this.craftAndItem.piOrderItemMaterial[index].afHight*num*midu/1000000).toFixed(4)
            this.craftAndItem.piOrderItemMaterial[index].materCost=this.craftAndItem.piOrderItemMaterial[index].afWeight*price*this.craftAndItem.piItem.num
            console.log(this.craftAndItem.piOrderItemMaterial[index].materCost)
          }
        }else{
          if(zhijing!=null && gao!=null && num!=null){
            this.craftAndItem.piOrderItemMaterial[index].afHight=Number(gao)/this.craftAndItem.piItem.num
            this.craftAndItem.piOrderItemMaterial[index].afDiam=zhijing
            this.craftAndItem.piOrderItemMaterial[index].afArea=((3.14*zhijing/2*zhijing/2+2*3.14*zhijing/2*this.craftAndItem.piOrderItemMaterial[index].afHight)/this.craftAndItem.piItem.num/100).toFixed(2)
            this.craftAndItem.piOrderItemMaterial[index].afWeight=(((3.14*zhijing/2*zhijing/2*this.craftAndItem.piOrderItemMaterial[index].afHight*num))/this.craftAndItem.piItem.num/1000000).toFixed(4)
            this.craftAndItem.piOrderItemMaterial[index].materCost=this.craftAndItem.piOrderItemMaterial[index].afWeight*price*this.craftAndItem.piItem.num
          }
        }
      },
    },
    mounted() {
      this.searchUser(this.$route.query.id);//获取列表
      this.cxnowOrderCode(this.$route.query.id)
      console.log(this.$route.query.id)
      this.findpimaterialList()
      this.findprocessList()
    }
  }
</script>

<style scoped>
  .d1 {
    border-bottom: 1px solid #333744;
  }

  .d2 {
    margin: 20px
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
